<template>
  <div>
    <van-search
      class="searchfixd"
      v-model="keyword"
      show-action
      label="关键词"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <van-swipe :autoplay="3000" class="lunbo">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" fit="scale-down" />
      </van-swipe-item>
    </van-swipe>

    <div class="dynamic" v-for="(item, i) in dynamic" :key="i">
      <div class="usermsg">
        <div>
          <img
            :src="
              'http://localhost:8888/userimg/' +
              (item.userimg == 'null' || item.userimg == null
                ? '/null.jpeg'
                : item.userimg)
            "
            alt=""
          />
          <span>{{ item.username }}</span>
        </div>
        <div>
          <span>时间:{{ item.timer.split(" ")[1] }}</span>
        </div>
      </div>

      <div>
        {{ item.content }}
      </div>

      <div class="imgs-con" v-if="item.conimg != ''">
        <van-image
          @click="showPopup"
          fit="cover"
          lazy-load
          v-for="(img, i) in item.conimg"
          :key="i"
          :src="`http://localhost:8888/imgcontent/${img}`"
          alt=""
          :width="`${
            imgW / item.conimg.length -
            (item.conimg.length - 1) / item.conimg.length
          }%`"
        />
      </div>
      <span class="dateY">{{ item.timer.split(" ")[0] }}</span>
    </div>
    <van-popup :close-on-popstate="true" class="big-img" v-model="show">
      <van-image
        @click="show = false"
        fit="cover"
        width="100%"
        :src="showImg"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import AppBar from "@/components/AppBar.vue";
import { Popup } from "vant";

import { Lazyload } from "vant";
import { mapState } from "vuex";

Vue.use(Popup);
Vue.use(Lazyload);
Vue.use(Search);
export default {
  computed: {
    ...mapState(["islogin", "idphone", "username", "uid", "userimg"]),
  },
  mounted() {
    this.getDynamic();
  },
  components: { AppBar },
  props: ["lid", "lik"],
  data() {
    return {
      keyword: "",
      images: ["/ll1.jpeg", "/ll2.jpeg", "/ll3.jpeg"],
      imgW: "100",
      dynamic: "",
      imgs: [],
      show: false,
      showImg: "",
    };
  },

  watch: {
    dynamic(newValue, oldValue) {
      this.getDynamic();
    },
  },
  methods: {
    showPopup(e) {
      this.show = true;
      this.showImg = e.target.currentSrc;
    },
    onSearch() {},
    getDynamic() {
      let url = "v1/users/dynamic";
      this.axios.get(url).then((res) => {
        this.dynamic = res.data.data.reverse();
        this.dynamic.forEach((element) => {
          element.conimg = element.conimg.split(",");
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchfixd {
  position: fixed;
  width: 100%;
  z-index: 10;
}
.lunbo {
  padding-top: 54px;
  width: 95%;
  margin: 0 auto;
  img {
    // width: 80%;
    width: 100%;
    height: 200px;
  }
}

.dynamic {
  width: 85%;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  padding: 10px;
  // background-color: rgb(178, 197, 191);
  .usermsg {
    // width: 150px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;

    span:nth-child(2) {
      margin-left: 10px;
    }
    span:last-child {
      display: inline-block;
      margin-right: 15px;
      color: #666;
    }
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .imgs-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .dateY {
    display: flex;
    // justify-content: flex-end;
    color: #666;
    margin-top: 10px;
  }
}
.big-img {
  width: 100%;
}
</style>